
<div class="fsh-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <div class="layui-form-item wx-search" id="list_form">
            <div class="layui-inline">
                <input type="text" name="title" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn btn-primary" id="menu_search">搜索</button>
            <div class="layui-btn-container" style="text-align: right">
                <button class="layui-btn btn-primary" id="menu_add">新建</button>
            </div>
        </div>
        <table id="list_table"></table>
    </div>
</div>

<script>
    layui.use(['layer', 'treeTable'], function () {
        var layer = layui.layer;
        var treeTable = layui.treeTable;


        var tableObj = treeTable.render({
            elem: '#list_table',
            tree: {
                iconIndex: 0,
                isPidData: true,
                idName: 'menu_id',
                pidName: 'pid'
                //,childName: "childName"
            },
            text: {none: "<div style=\"padding: 18px 0;\">哎呀，一条数据都没有~</div>"},
            reqData: function (data, callback) {
                var param = {page: 1, pageSize: 20};
                $.extend(param, util.getFormData("list_form"));
                $.get(context + '/api/sysMenu/list', param, function (res) {
                    callback(res.data);
                    layer.closeAll('loading');
                });
            },
            align: "center",
            cols: [ //表头
                // {type: 'numbers'},
                {field: 'title', title: '名称', align: 'left'},
                {field: 'menuKey', title: '别名', align: 'center'},
                {field: 'menu_id', title: 'ID', align: 'center'},
                {field: 'pid', title: '父级ID', align: 'center'},
                {field: 'createDate', title: '创建时间', align: 'center'},
                {
                    title: '操作', width: 400, align: 'center', unresize: true, align: 'center',
                    templet: function (d) {
                        return '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>'
                            + '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
                            + '<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="menu">分配权限</a>';
                    }
                }
            ]
            , page: true
        });

        // 检索
        $("#menu_search").click(function () {
            reloadTable(tableObj);
        });
        // 添加
        $("#menu_add").click(function () {
            showDialog({
                title: '新建'
                , template: 'add'
                , tableObj: tableObj
                , saveUrl: context + '/api/sysMenu/add'
                , type: 'post'
                , dataType: 'json'
            })
        });

        //表格内部操作按钮监听
        treeTable.on('tool(list_table)', function (obj) { //注：tool是工具条事件名，mainList是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'update') {
                showDialog({
                    title: '编辑'
                    , template: 'add'
                    , tableObj: tableObj
                    , htmlData: data
                    , saveUrl: context + '/api/sysMenu/update'
                    , type: 'patch'
                    , dataType: 'json'
                })
            }
            // 删除
            if (layEvent === 'del') {
                confirmDel(context + '/api/sysMenu/del/' + data.menu_id, tableObj);
            } else if (layEvent === 'menu') {
                showDialog({
                    title: '分配权限 - ' + data.roleName
                    , template: 'menu'
                    , tableObj: tableObj
                    , htmlData: data
                    , saveUrl: context + '/api/sysMenu/updatePermission'
                    , type: 'patch'
                    , dataType: 'json'
                    , yes: function (index, layero) {
                        var oCks = xtree3.GetAllCheckBox(); //这是方法
                        var paramArr = new Array();
                        var param = {menu_id: data.menu_id, permission_ids: paramArr};
                        for (var i = 0, n = 0; i < oCks.length; i++) {
                            if (oCks[i].checked && oCks[i].value != 'on') {
                                paramArr[n] = oCks[i].value;
                                n++;
                            }
                        }console.log(param);
                        return JSON.stringify(param);
                    }

                })
            }

        });

    });
</script>
<style>
    img.fans-portrait {
        width: 50px;
        height: 50px;
    }

    .fsh-rightPanel .layui-table-body .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }
</style>